<template>
    <!-- 账号注销页面 -->
    <div class="logout-box">
        <Header :headerObj='headerObj'></Header>
        <div class="notice">
            <img class="notice-img" src="../../assets/images/zhuyi@2x.png" alt="" />
            <p class="notice-p">账号注销后</p>
            <p class="notice-p">以下信息将会被清空且无法找回</p>
        </div>
        <div class="message">
            <ul class="message-ul">
                <li v-for="item in logMessage" :key="item">
                    <span>{{ item }}</span>
                </li>
            </ul>
        </div>
        <div class="hint">
            <div class="hint-header">
                <img src="../../assets/images/zhuyi.png" alt="" />
                <p>注意</p>
            </div>
            <div class="hint-text">
                <p>
                    1.提交注销申请后存在15天申诉期。申诉期内登录账号可取消注销。申诉日期到期后，账号将自动注销且无法找回。
                </p>
                <p>2.申诉期满，再次进入可授权重新注册账号。</p>
            </div>
        </div>
        <div class="footer">
            <van-checkbox v-model="disabledif" icon-size="16px" class="van-checkbox" checked-color="#E8340A">
                <span> 我已知晓注销行为不可恢复，且自愿放弃所有虚拟资产 </span>
            </van-checkbox>
            <van-button :disabled="!disabledif" type="danger" :color="butcolor" class="van-button"
                @click="controlShowFn">下一步</van-button>
        </div>
        <LogoutNotarize :dialogData="dialogData" :controlShow="controlShow"></LogoutNotarize>
    </div>
</template>
<script>
    import LogoutNotarize from "@/components/LogoutNotarize.vue";
    import { cancel } from "@/util/api.js";
    import fun from "@/util/function";

    export default {
        components: {
            LogoutNotarize,
        },
        data() {
            return {
                isBack: false, // 返回按钮是否显示
                isClose: false, // 关闭按钮是否显示
                getPlatform: fun.getPlatform(), //app wx
                controlShow: false,
                disabledif: false,
                butcolor: "#ACACAC",
                headerObj: {
                    'isShowBack': true,
                    'isShowClose': false,
                    'isShowMine': false,
                    'fromType': 'mine',
                    'titleText': '账号注销',
                    'color': '#27344B'
                },
                dialogData: {
                    title: "用户注销确认",
                    message: "点击注销后即刻生效，且不可恢复，您确认要继续吗？",
                    confirmButtonText: "我再想想",
                    cancelButtonText: "确认注销",
                    confirmEvent: async () => {
                        try {
                            const dataMsg = await cancel();
                            const { code, data } = dataMsg.data;
                            if (code === "000000") {
                                fun.toastMessage("账号已申请注销~");
                                setTimeout(() => {
                                    this.$router.go(-1);
                                }, 1000);
                            } else {
                                fun.toastMessage("账号已注销");
                                setTimeout(() => {
                                    this.$router.go(-1);
                                }, 1000);
                            }
                        } catch (error) {
                            fun.toastMessage("网络可能出了点小问题");
                            console.error(error);
                        }
                    },
                },
            };
        },
        methods: {
            controlShowFn() {
                this.controlShow = false;
                this.controlShow = true;
            },
            disabledof() {
                if (this.disabledif) {
                    this.butcolor = "#E8340A";
                } else {
                    this.butcolor = "#ACACAC";
                }
            },
        },
        watch: {
            disabledif() {
                this.disabledof();
                if (!this.disabledif) this.controlShow = false;
            },
        },
        created() {
            switch (channel) {
                case "zxjtqh":
                    this.logMessage = [
                        "账号信息",
                        "观看记录、我的收藏",
                        "我的奖品礼券、我的订购",
                    ];
                    break;
                case "zxjt":
                    this.logMessage = [
                        "账号信息",
                        "观看记录、我的收藏",
                        "我的红包、我的奖品礼券",
                    ];
                    break;
                case "gdyh":
                    this.logMessage = [
                        "账号信息",
                        "我的关注、观看记录、我的收藏",
                        "我的红包、我的奖品礼券",
                    ];
                    break;
                case "zyzq":
                    this.logMessage = [
                        "账号信息",
                        "我的收藏、浏览记录"
                    ];
                    break;
                case "zgrb":
                    this.logMessage = [
                        "账号信息",
                        "观看记录、我的收藏、签到记录",
                        "我的红包、我的奖品礼券",
                    ];
                    break;
                case "zxxykzx":
                    this.logMessage = [
                        "账号信息",
                        "观看记录、我的收藏、签到记录",
                        "我的打赏、我的奖品礼券",
                    ];
                    break;
                case "zxyh":
                    this.logMessage = [
                        "账号信息",
                        "我的预约、观看记录、我的关注、我的收藏、签到记录",
                        "我的打赏、我的奖品礼券",
                    ];
                    break;

                default:
                    this.logMessage = [
                        "账号信息",
                        "我的关注、观看记录、我的收藏、签到记录",
                        "我的红包、我的奖品礼券",
                    ];
                    break;
            }
            this.disabledof();
            this.$store.dispatch("hideNav");
        },
        mounted() {
            this.$store.dispatch("hideNav");
            if (window.topmargin && this.$channel == 'zxjtqh') {//仅app才会有window.topmargin
                fun.setBarHeight(document.getElementById('history-content-box'), window.topmargin * 2, true) //历史记录列表高度
            }
        },
    };
</script>
<style scoped lang="less">
    .logout-box {
        width: 100%;
        height: 100%;
        overflow-y: scroll;      
        .notice {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            margin-top: 140px;
            border-bottom: 1px #ededed solid;
            padding: 0 40px 50px 40px;
            .notice-img {
                width: 160px;
                height: 160px;
                margin: 30px 0;
            }

            .notice-p {
                color: #333;
                font-weight: 600;
                margin: 5px 0;
                align-content: center;
            }
        }

        .message {
            padding: 40px;
            border-bottom: 1px #ededed solid;

            .message-ul>li {
                margin: 15px 28px;
                list-style: disc;
                color: #e8340a;

                span {
                    font-size: 28px;
                    color: #333;
                }
            }
        }

        .hint {
            padding: 20px;

            .hint-header {
                height: 80px;
                padding: 20px 0;
                display: flex;
                align-items: center;
                vertical-align: text-top;

                img {
                    line-height: 32px;
                    width: 30px;
                    height: 30px;
                }

                p {
                    line-height: 32px;
                    height: 30px;
                    font-size: 30px;
                    align-content: center;
                    margin: 0 10px;
                    vertical-align: text-bottom;
                }
            }

            .hint-text {
                padding: 5px 20px;
                background-color: #f7f7f7;
                font-size: 26px;
                border-radius: 8px;

                p {
                    line-height: 35px;
                    color: #999;
                    margin: 15px 0;
                }
            }
        }

        .footer {
            margin-top: 80px;
            display: flex;
            align-items: center;
            flex-direction: column;

            .van-checkbox {
                height: 40px;
                align-content: center;
                font-size: 22px;

                i {
                    width: 42px;
                    height: 42px;
                }

                span {
                    vertical-align: text-bottom;
                }
            }

            .van-button {
                width: 260px;
                height: 70px;
                font-size: 30px;
                border-radius: 999px;
                font-weight: 600;
                padding: 15px;
                margin: 20px;
            }
        }
    }
</style>